<!-- 视图多边形 -->

<template>
  <div v-show="area.length" class="SecureOverview-MapView-area">
    <div
      class="SecureOverview-MapView-area-bg"
      :style="bgStyle"
      @mousedown.prevent="mouseDown"
      @mouseup.prevent="mouseUp"
      @mousemove.prevent="mouseMove"
    />

    <div class="SecureOverview-MapView-area-text" :style="textStyle">{{ obj.name }}</div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewArea from '@admin/views/System/Map/MapRegion/MapView/ViewArea'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewArea',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [ViewArea, CORE.mixModal('area', 'area_')],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      inClick: false, // 是否正在点击
      inMove: false, // 是否正在移动
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 鼠标按下
     */
    mouseDown({ button }) {
      if (button === 0) this.inClick = true
    },

    /**
     * 鼠标弹起
     */
    mouseUp({ button }) {
      if (button === 0 && this.inClick && !this.inMove) this.area_openShow(this.obj)
      this.inClick = this.inMove = false
    },

    /**
     * 鼠标移动
     */
    mouseMove() {
      if (this.inClick) this.inMove = true
    },
  },
}
</script>
